<!-- eslint-disable vue/no-parsing-error -->
<!-- 新增/编辑指标 -->
<template>
  <a-modal
    width="60%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    :mask-closable="false"
    unmountOnClose
  >
    <template #title> 设置计算公式 </template>
    <div>
      <span>考核启动后，HR需要录入每个员工的指标目标值与员工实际数据</span>
      <a-form :model="formData">
        <a-form-item label="数据来源" field="" show-colon>
          <div>
            <a-input v-model="formData.source.name"></a-input>
            <div>
              <span>单位：</span>
              <a-input v-model="formData.source.unit"></a-input>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="计算规则" field="" show-colon>
          <a-select v-model="formData.rules">
            <a-option :value="1">目标值</a-option>
            <a-option :value="2">目标达成率</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="计算公式"
          field=""
          show-colon
          :row-class="{
            display: 'block'
          }"
        >
          <div>
            <div v-if="formData.rules === 2">
              <a-radio-group v-model="formData.calcData.flag">
                <a-radio :value="1">按比例</a-radio>
                <a-radio :value="2">按区间</a-radio>
              </a-radio-group>

              <div v-if="formData.calcData.flag === 1">
                <div>
                  指标评分=目标达成率*
                  <a-input-number
                    v-model="formData.calcData.proportion.score"
                    hide-button
                    style="width: 100px"
                  ></a-input-number>
                </div>
                <div>注：最终评分不会超过指标评分上限</div>
                <div>
                  最低达成率：
                  <a-input-number
                    v-model="formData.calcData.proportion.min"
                    hide-button
                    style="width: 100px"
                  >
                  </a-input-number>
                </div>
                <div>
                  注：当目标达成率小于最低达成率时，该项指标不得分，即为0分
                </div>
              </div>
            </div>

            <a-table
              :data="formData.calcData.countTableData"
              :bordered="{
                wrapper: true,
                cell: true,
                headerCell: true,
                bodyCell: true
              }"
              v-if="
                formData.rules === 1 ||
                (formData.rules === 2 && formData.calcData.flag === 2)
              "
              stripe
            >
              <template #columns>
                <a-table-column title="数据来源（单位）" :width="400">
                  <template #cell="{ record }">
                    <div style="display: flex">
                      <a-input-number
                        style="width: 100px"
                        hide-button
                        v-model="record.source.min"
                      ></a-input-number>
                      <span style="line-height: 34px"> &lt= 目标 &lt=</span>
                      <a-input-number
                        style="width: 100px"
                        hide-button
                        v-model="record.source.max"
                      ></a-input-number>
                    </div>
                  </template>
                </a-table-column>
                <a-table-column title="指标评分" :width="200">
                  <template #cell="{ record }">
                    <a-input-number
                      style="width: 100px"
                      hide-button
                      v-model="record.score"
                    ></a-input-number>
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="200">
                  <template #cell="{ rowIndex }">
                    <a-space>
                      <icon-font
                        type="icon-add-def"
                        :size="26"
                        @click="add(rowIndex)"
                      ></icon-font>
                      <icon-font
                        type="icon-delete"
                        :size="26"
                        @click="del(rowIndex)"
                      ></icon-font>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: any; // 传进来的数据
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'indexEmit']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emits('update:visible', visible);
  }
});

let formData = ref<any>({
  // 数据来源
  source: {
    name: '', // 名字
    unit: '' // 单位
  },
  rules: 1, // 计算规则 1 按目标值 2 按目标达成率

  // 计算公式
  calcData: {
    flag: 1, // 1 按比例 2 按区间,
    proportion: {
      score: undefined,
      min: undefined
    },
    // 按区间或者按目标值出现的表格的数据
    countTableData: [
      {
        // 目标达成率
        source: {
          min: undefined,
          max: undefined
        },
        // 指标评分
        score: undefined
      }
    ]
  }
});

watch(
  () => modalVisible.value,
  (newVal: boolean) => {
    // 如果是编辑，则赋值给formData
    // if (newVal && props.data?.id) {
    //   formData.value = cloneDeep(props.data);
    // } else {
    //   // 每次新增都初始化
    //   for (let i in formData.value) {
    //     // 如果是评分人则默认赋值为2，其他为undefined
    //     if (i === 'scorePeople') formData.value[i] = 2;
    //     else if (i === 'isAddStore') formData.value[i] = false;
    //     else formData.value[i] = undefined;
    //   }
    // }
    // if (newVal) {
    //   for (let i in formData.value) {
    //     // 如果是评分人则默认赋值为2，其他为undefined
    //     if (i === 'scorePeople') formData.value[i] = 2;
    //     else if (i === 'isAddStore') formData.value[i] = false;
    //     else formData.value[i] = undefined;
    //   }
    // }
  }
);

// 新增一项
const add = (index: number) => {
  const item = {
    source: {
      min: undefined,
      max: undefined
    },
    score: undefined
  };
  formData.value.countTableData.splice(index + 1, 0, item);
};

// 删除一项
const del = (index: number) => {
  formData.value.countTableData.splice(index, 1);
};

const handleOk = () => {
  emits('indexEmit', formData.value);
  modalVisible.value = false;
};

const handleCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
